<script lang="ts">
import Vue from 'vue'
import NavBar from "@/components/nav-bar/nav-bar.vue";
import tips from "@/utils/tips";
import {getPrice} from "@/utils/utils";
import appConfig from "@/config/config";
import {createRefund} from "@/services/refund";

export default Vue.extend({
  name: "refund_page",
  components: {NavBar},
  data() {
    return {
      refundImage: [],
      money: '',
      model: {
        refundInfo: {
          order_id: '',
          refund_reason: '',
          phone_number: ''
        }
      },
      rules: {
        'refundInfo.refund_reason': {required: true, type: 'string'},
        'refundInfo.phone_number': {
          type: 'string', pattern: /^[1][3-9][0-9]{9}$/, min: 7, max: 11, message: '请输入联系号码',
          transform(value: any) {
            return String(value)
          },
        },
        'refundInfo.image': {type: 'string'},
      }
    }
  },
  computed: {
    lang(): any {
      return this.$t('refund_page');
    }
  },
  created() {
    // this.initializeRules();
  },
  onLoad(options: any) {
    console.log('----------------页面加载', options)
    // this.initializeRules();
    this.money = options.total_amount
    this.model.refundInfo.order_id = options.order_id
  },
  methods: {
    getPrice,
    // 为了初始化规则 (写了lang 就报错 三个小时才能找得到)
    initializeRules() {
      this.rules = {
        'refundInfo.refund_reason': {required: true, type: 'string', message: this.lang.reason_placeholder},
        'refundInfo.phone_number': {
          type: 'string', pattern: /^[1][3-9][0-9]{9}$/,
          transform(value: any) {
            return String(value)
          },
          min: 7, max: 11, required: true, message: this.lang.phone_placeholder,
        },
        'refundInfo.image': {type: 'string'},
      };
    },
    // 上传和删除店铺照片
    uploadImage(fileData: AnyObject) {
      console.log(fileData)
      const {file} = fileData
      uni.uploadFile({
        url: appConfig.api + 'upload/file/refund', // 我们的服务器地址
        filePath: file[0].url,
        file: file[0],
        fileType: 'image',
        formData: {is_black_white: "false"},
        name: 'file',
        success: (result) => {
          const res = JSON.parse(result.data)
          const {url, file_path} = res.data
          this.refundImage = [{url}]
          this.model.refundInfo.image = file_path
        }, fail(err) {
          console.log(err)
        }
      });
    },
    deleteImage() {
      this.refundImage = []
    },
    // 提交
    refundInfoSubmit() {
      console.log('Refund Info:', this.model.refundInfo);
      console.log(this.$refs.uForm.validate())
      console.log(this.$refs.uForm.validateField('refundInfo.refund_reason'))
      this.$refs.uForm.validate().then(async validationResult => {
        if (!validationResult) {
          tips.toast('缺少参数');
          return;
        }
        const response = await createRefund(this.model.refundInfo);
        if (response.code === 200) {
          await uni.switchTab({url: '/pages/index/index'})
          tips.toast(this.lang.submit_success);
          return;
        } else {
          tips.toast(response.msg);
        }
        tips.toast(response.msg);
      }).catch(errors => {
        tips.toast('表单验证失败');
      });
    }
  }
})
</script>

<template>
  <view>
    <nav-bar :page-title="lang.page_name"/>

    <view :class="[locale]">
      <u-form
          :model="model"
          labelPosition="top"
          ref="uForm"
          :rules="rules"
      >
        <view class="flex-column radio-20 padding-30 margin-30 bg-white">
          <view class="flex-center text-32 gap-8 margin-bottom-40">
            <view>{{ lang.refund_amount }}</view>
            <u-text mode="price" color="#0E81FC" size="26" :text="money"></u-text>
          </view>


          <u-form-item required :label="lang.reason_text" prop="refundInfo.refund_reason" :labelWidth="150">
            <u-textarea
                v-model="model.refundInfo.refund_reason"
                :placeholder="lang.reason_placeholder"
                :height="70" count :maxlength="100"
            />
          </u-form-item>

          <u-form-item
              :label="lang.image_text"
              prop="refundInfo.image"
              :labelWidth="120"
          >
            <u-upload
                :width="150"
                :height="150"
                accept="image"
                :maxCount="1"
                :fileList="refundImage"
                @afterRead="uploadImage"
                @delete="deleteImage"
                multiple
            ></u-upload>
          </u-form-item>

        </view>

        <view class="flex-column radio-20 padding-30 margin-30 bg-white">
          <u-form-item
              :label="lang.phone_text"
              :labelWidth="150"
              prop="refundInfo.phone_number"
          >
            <u-input
                style="font-family: 'uighurche', serif"
                placeholderClass="input-placeholder"
                v-model="model.refundInfo.phone_number"
                :placeholder="lang.phone_placeholder"
                type="number"
                :maxlength="11"
                border="none"
            />
          </u-form-item>
        </view>
      </u-form>

      <view class="margin-30">
        <u-button type="primary" size="large" shape="circle" @click="refundInfoSubmit" :text="lang.submit"/>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.input-placeholder {
  font-family: 'uighurche', serif;
}
</style>